<template>
  <div class="p-3 bg-white rounded-lg flex-1">
    <el-form :model="searchForm" label-width="auto" inline>
      <el-form-item label="姓名" class="mb-0">
        <el-input v-model="searchForm.name" placeholder="请输入姓名" clearable/>
      </el-form-item>
      <el-form-item label="电话" class="mb-0">
        <el-input v-model="searchForm.phone" placeholder="请输入电话" clearable/>
      </el-form-item>
      <el-form-item label="身份证号" class="mb-0">
        <el-input v-model="searchForm.id_card" placeholder="请输入身份证号" clearable/>
      </el-form-item>
      <el-button type="primary" @click="search">搜索</el-button>
      <el-button @click="reset">重置</el-button>
    </el-form>
    <div class="mt-3">
      <el-table 
        :data="patientList" 
        border 
      >
        <el-table-column type="index" label="序号" min-width="100" show-overflow-tooltip/>
        <el-table-column prop="name" label="姓名" min-width="90" show-overflow-tooltip/>
        <el-table-column prop="gender" label="性别" min-width="60" show-overflow-tooltip/>
        <el-table-column prop="phone" label="电话" min-width="120" show-overflow-tooltip/>
        <el-table-column prop="id_card" label="身份证号" min-width="180" show-overflow-tooltip/>
        <el-table-column prop="nation" label="民族" min-width="100" show-overflow-tooltip/>
        <el-table-column prop="religion" label="宗教" min-width="100" show-overflow-tooltip/>
        <el-table-column prop="address" label="家庭地址" min-width="200" show-overflow-tooltip/>
        <el-table-column prop="action" label="操作" fixed="right" min-width="60">
          <template #default="scope">
            <el-button type="info" size="small" @click="handleDetail(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex justify-end">
        <Pagination
          :total="total"
          :page="searchForm.page"
          :page-size="searchForm.page_size"
          @change="handlePageChange"
        />
      </div>
    </div>
    <!-- 添加抽屉组件 -->
    <CommonDrawer
      v-model="drawerVisible"
      title="患者详情"
      size="600px"
      :showFooter="false"
    >
      <div class="patient-detail">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="姓名">{{ currentPatient.name }}</el-descriptions-item>
          <el-descriptions-item label="性别">{{ currentPatient.gender }}</el-descriptions-item>
          <el-descriptions-item label="电话">{{ currentPatient.phone }}</el-descriptions-item>
          <el-descriptions-item label="身份证号" :span="2">{{ currentPatient.id_card }}</el-descriptions-item>
          <el-descriptions-item label="民族">{{ currentPatient.nation }}</el-descriptions-item>
          <el-descriptions-item label="宗教">{{ currentPatient.religion }}</el-descriptions-item>
          <el-descriptions-item label="家庭地址" :span="2">{{ currentPatient.address }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </CommonDrawer>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getCustomerList } from '@/api/PatientApi';
import CommonDrawer from '@/components/common/Drawer.vue';
import Pagination from '@/components/common/Pagination.vue';
const searchForm = ref({
  name: '',
  id_card: '',
  phone: '',
  page: 1,
  page_size: 10,
});

const patientList = ref([
  {
    date: '2016-05-02',
    name: '王小虎',
    gender: '男',
    age: 20,
    phone: '12345678901',
    idCard: '123456789012345678',
    nursing: '二级护理',
    address: '上海市普陀区金沙江路 1518 弄',
  },
  {
    date: '2016-05-02',
    name: '王小虎',
    gender: '男',
    age: 20,
    phone: '12345678901',
    idCard: '123456789012345678',
    nursing: '二级护理',
    address: '上海市普陀区金沙江路 1518 弄',
  },
]);

const total = ref(patientList.value.length);
const drawerVisible = ref(false);
const currentPatient = ref({});

// 详情
const handleDetail = (row) => {
  currentPatient.value = { ...row };
  drawerVisible.value = true;
}

//获取患者列表
const getPatientListData = () => {
    getCustomerList(searchForm.value).then(res => {
    if(res.code == 200){
      patientList.value = res.data.list;
      total.value = res.data.total;
    }
  });
}
onMounted(() => {
  getPatientListData()
})
</script>

<style scoped>
.patient-detail {
  :deep(.el-descriptions) {
    margin-bottom: 0;
  }

  :deep(.el-descriptions__header) {
    margin-bottom: 0;
  }

  :deep(.el-descriptions__body) {
    background-color: #fff;
  }

  :deep(.el-descriptions__label) {
    width: 120px;
    background-color: #f5f7fa;
    color: #606266;
    font-weight: normal;
    padding: 12px 16px;
  }

  :deep(.el-descriptions__content) {
    padding: 12px 16px;
  }

  :deep(.el-descriptions__cell) {
    border-right: 1px solid #dcdfe6;
  }
}
</style>

